<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border='1px'>
        <tr>
            <th><input type="checkbox" id = 'all'>全选/全不选</th>
            <th>物品名称</th>
            <th>店家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>原味奶茶</td>
            <td>一点点</td>
            <td>11</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>香芋奶茶</td>
            <td>一点点</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>巧克力奶茶</td>
            <td>大上湾</td>
            <td>13</td>
        </tr>
    </table>
    <button id = 'btn'>反选</button>
    <script>
        //获取元素
        var all = document.getElementById('all');
        var btn = document.getElementById('btn');
        var inputList = document.getElementsByTagName('input');

        //注册事件
        //点击全选选择所有,或者全不选取消所有,
        all.onclick = function() {
            for(var i = 1; i < inputList.length; i++) {
                var input = inputList[i];
                input.checked = all.checked;
            }
        }
        // 点击其他的checkbox,有一个没选,则取消全选按钮,如果全选上,自动勾选,取消也是
        
        for(var i = 1; i < inputList.length; i++) {
            var input = inputList[i];
            input.onclick = function() {
                var ischecked = true;
                for(var i = 1; i <inputList.length; i++) {
                    if(!inputList[i].checked) {
                        ischecked = false;
                    }
                }
                all.checked = ischecked;
            }
        }
        //点击反选,取消的选上,选上的取消,全选看情况取消和选择
        btn.onclick = function() {
            var ischecked = true;
            for(var i = 1; i < inputList.length; i++) {
                if(!inputList[i].checked) {
                    inputList[i].checked = true;
                   
                } else {
                    inputList[i].checked = false;
                }
            }
            for(var j = 1; j < inputList.length; j++) {
                        if(!inputList[j].checked) {
                            ischecked = false;
                        }
                    }
            all.checked = ischecked;
        }
    </script>
</body>
</html>